<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Decrypt Tool for Obsidian Meld Encrypt Plugin</title>
	<script src="offline-decrypt.js"></script>
	<style>
		:root{
			font-family: Arial, Helvetica, sans-serif;
		}

		body{
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #eee;
		}

		h1{
			text-align: center;
		}

		.row-500{
			display: flex;
			flex-direction: column;
			max-width: 500px;
		}

		.col{
			display: flex;
			flex-direction: row;
			align-items: baseline;
		}
		
		label{
			color: blue;
			margin-top: 1em;
		}

		textarea{
			height: 5em;
			resize: vertical;
			padding: 0.5em;
		}

		button, input{
			padding: 0.5em;
		}

		#pw{
			margin-right: 1em;
		}

		#m{
			margin-left: 1em;
		}

		.footnote{
			margin-top: 4em;
			font-size: 0.8em;
		}
	</style>
</head>
<body>

	<div class="row-500">
		<h1>🔐 Decrypt Tool for Obsidian Meld Encrypt Plugin 🔐</h1>
		
		<p>Use this tool to decrypt notes without using the Obsidian Meld Encrypt Plugin.</p>

		<label for="et">Encrypted Text</label>
		<textarea id="et"></textarea>
		
		<label for="pw">Password</label>
		<div class="col">
			<input id="pw" type="password">
			<button id="btnDecrypt" type="button">🔓 Decrypt</button>
			<span id="m"></span>
		</div>

		<label for="dt">Decrypted Text</label>
		<textarea id="dt" readonly=""></textarea>

		<p class="footnote"><b>Note:</b> As an offline backup, you can save your own copy of this tool.  Right click and choose 'Save link as' for: <a href="decrypt.html" download>this page</a> and the <a href="crypto-helper.js">decryptor code</a></p>

	</div>

	<script>
		document.getElementById('btnDecrypt').onclick = (ev) => decryptHandler();

		async function decryptHandler(){
			const eTextEncrypted = document.querySelector('#et');
			const ePassword = document.querySelector('#pw');
			const eTextDecrypted = document.querySelector('#dt');
			const eMessage = document.querySelector('#m');
			
			eMessage.innerHTML = '';
			
			const result = await $.decrypt(eTextEncrypted.value, ePassword.value);

			if (result ===  null){
				eMessage.innerHTML = '👎 Decryption failed';
				eTextDecrypted.value = '';
			}else{
				eMessage.innerHTML = '👍 Decrypted';
				eTextDecrypted.value = result
			}
		}
	</script>
</body>
</html>